// 选择框选中效果制作
window.addEventListener('load', function() {
    (function() {
        var chooseItem = document.querySelector('.summary-choose').querySelectorAll('.item');
        for(var i = 0; i < chooseItem.length; i++) {
            chooseItem[i].setAttribute('data-index', i);
        }

        for(var i = 0; i < chooseItem.length; i++) {
            var chooseA = chooseItem[i].querySelectorAll('a');
            for(var j = 0; j < chooseA.length; j++) {
                chooseA[j].addEventListener('click', function() {
                    var itemIndex = this.parentNode.parentNode.parentNode.dataset.index;
                    
                    var as = chooseItem[itemIndex].querySelectorAll('a');
                    for(var i = 0; i < as.length; i++) {
                        as[i].className = '';
                    }
                    this.className = 'current';
                })
            }
        }
    })();
    
})


// 购买件数加减效果
window.addEventListener('load', function() {
    (function() {
        var amount = document.querySelector('.choose-amount');
        var add = amount.querySelector('.add');
        var reduce = amount.querySelector('.reduce');
        var amountIput = amount.querySelector('input');

        add.addEventListener('click', function() {
            amountIput.value++;
        });
        reduce.addEventListener('click', function() {
            if(amountIput.value > 1) {
                amountIput.value--;
            }
        });
    })();
    
})



// 一键切换谢艺艺模式
window.addEventListener('load', function() {
    (function() {
        var mainImg = document.querySelector('#main-img').querySelector('img');
        var xyy = document.querySelector('#xyy');
        var big = document.querySelector('.big').querySelector('img');
        var lis = document.querySelector('.spec-items').querySelector('.lh').querySelectorAll('li')
        var flag = 1;
        xyy.addEventListener('click', function() {
            if(flag == 1) {
                mainImg.src = 'upload/xyy/31.jpg';
                mainImg.style.maxWidth = '250px';
                big.src = 'upload/xyy/31.jpg';
                flag = 0;

                // console.log(lis[0].children[0]);
                lis[0].children[0].src = mainImg.src;
                lis[1].children[0].src = 'upload/xyy/29.jpg';
                for(var i = 0; i < 2; i++) {
                    lis[i].addEventListener('click', function() {
                        for(var i = 0; i < 2; i++) {
                            lis[i].className = ''
                        }
                        this.className = 'current';
                        mainImg.src = this.children[0].src;
                        big.src = this.children[0].src;
                    })
                }
            } else {
                mainImg.src = 'upload/detail/s3.png';
                mainImg.style.maxWidth = '400px';
                big.src = 'upload/detail/big.jpg';
                flag = 1;
                lis[0].children[0].src = mainImg.src;
                lis[1].children[0].src = mainImg.src;
                for(var i = 0; i < 2; i++) {
                    lis[i].addEventListener('click', function() {
                        for(var i = 0; i < 2; i++) {
                            lis[i].className = ''
                        }
                        this.className = 'current';
                        mainImg.src = this.children[0].src;
                        big.src = "upload/detail/big.jpg";
                    })
                }
            }
            
        })
    })();
})


/* 
    切换图片模块
    实现效果：点击小图片，大图片随之变化，点击左右键可以在图片当中切换
*/


// jd放大镜模块
/* 
1．整个案例可以分为三个功能模块
2. 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
3. 黄色的遮挡层跟随鼠标功能
4. 移动黄色遮挡层，大图片跟随移动功能
*/
window.addEventListener('load', function() {
    (function() {
        var mainImg = document.querySelector('.main-img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 当我们鼠标经过 main-img 就显示和隐藏 mask 遮挡层 和 big 大盒子
    mainImg.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    mainImg.addEventListener('mouseout', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    })

    /* 
    1. 黄色的遮挡层跟随鼠标功能。
    2. 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
    3. 首先是获得鼠标在盒子的坐标。
    4. 之后把数值给遮挡层作为left和top值。
    5. 此时用到鼠标移动事件，但是还是在小图片盒子内移动。
    6. 发现，遮挡层位置不对，想要再减去盒子自身高度和宽度的一半
    7. 遮挡层不能超出小图片盒子范围
    8. 如果小于零，就把坐标设置为0
    9. 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
    10. 遮挡层的最大移动距离：小图片盒子宽度 减去 遮挡层盒子宽度
    */

    // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    mainImg.addEventListener('mousemove', function(e) {
        // (1). 先计算出鼠标在盒子内的坐标
        // (2). 减去盒子高度 300的一半 是150 就是我们mask 的最终 left 和top值了
        var x = e.pageX - this.offsetLeft - mask.offsetWidth / 2;
        var y = e.pageY - this.offsetTop - mask.offsetHeight / 2;
        // console.log(x,y);
        // maskMax : 遮挡层最大移动距离

        var maskMax = mainImg.offsetWidth - mask.offsetWidth;
        // bigMax : 大图片最大移动距离
        // var bigMax = 800 - big.offsetWidth;
        var bigMax = big.children[0].offsetWidth - big.offsetWidth;
        if(y < 0 ) {
           y = 0 ;
        } else if(y > maskMax) {
            y = maskMax;
        }
        if(x < 0 ) {
           x = 0 ;
        } else if(x > maskMax) {
            x = maskMax;
        }
        mask.style.top = y + 'px';
        mask.style.left = x + 'px';
        // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        var bigX = bigMax * x / maskMax;
        var bigY = bigMax * y /maskMax;
        big.children[0].style.left = - bigX + 'px';
        big.children[0].style.top = - bigY + 'px' ;
        
    })
    })();
})










// tab 栏切换功能 start
window.addEventListener('load', function() {
    (function() {
        var lis = document.querySelector('.tab_list').querySelectorAll('li');
        var items = document.querySelector('.tab_con').querySelectorAll('.item')
        for(var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                for(var j = 0; j < lis.length; j++) {
                    lis[j].className = '';
                }
                this.className = 'crr';
                // 2. 在这后面写显示内容模块
                // 2.1 先排他
                for(var i = 0; i < items.length; i++) {
                    items[i].removeAttribute('style');
                }

                var index = this.getAttribute('index');
                console.log(index);

                // items[i].setAttribute('style','display:block;');
                // 这里用this.index是获取不到的，因为index是自定义数据
                items[index].style.display = 'block';
            }
        }
        })();
})

// tab 栏切换功能 end
